<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
</style>
<body>
    <button id="test" style="position:fixed;right:0;bottom:0" hidden>回到顶部</button>	
    <div id="body">
        <h1>Scroll me</h1>
        <h1>Scroll me</h1>
        <h1>Scroll me</h1>
        <h1>Scroll me</h1>
        <h1>Scroll me</h1>
        <h1>Scroll me</h1>
        <h1>Scroll me</h1>
        <h1>Scroll me</h1>
        <h1>Scroll me</h1>
        <h1>Scroll me</h1>
        <h1>Scroll me</h1>
    </div>
    <!-- <p id='showScroll'></p> -->
</body>
<script>
    window.addEventListener('scroll', function() {
        //your comlement
    let height = document.documentElement.getBoundingClientRect().bottom - document.documentElement.clientHeight
	if(height > 50) return
	let node = document.createElement("h1")
	node.innerHTML = '你到底了'
	document.querySelector('#body').appendChild(node)
    test.hidden = (pageYOffset <= document.documentElement.clientHeight)
     });
     test.onclick = function(){
        window.scrollTo({
		top: 0,
		behavior: "smooth"
	});
    test.hidden=0
    }
</script>
</html>